<!-- statistical 统计 -->
<template>
  <div class="statistical">
    <div class="main-title">统计</div>
    <div class="statistical_">
      <div class="theCore">
        <div class="screening">
          <div class="aroundOf compare_time">核心数据</div>
          <div class="screening_m">
            <span>时间筛选：</span>
            <choose-time :options="optionsTime" @changeTime="changeTime"></choose-time>
            <el-date-picker
              v-show='chooseTime == "1"'
              style="width: 288px;position: relative;"
              v-model="value2"
              align="right"
              type="date"
              ref="tiemPick"
              :clearable="false"
              placeholder="选择日期"
              @change="naturalDay"
              :picker-options="pickerOptions">
            </el-date-picker>
            <el-date-picker
              v-show='chooseTime == "2"'
              v-model="value1"
              style="width: 288px;position: relative;"
              type="daterange"
              ref="daterange"
              @change="naturalWeeks"
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-date-picker
              @change="controlMonth"
              v-show='chooseTime == "3"'
              style="width: 288px;position: relative;"
              v-model="value3"
              type="month"
              ref="month"
              :clearable="false"
              :picker-options="setMonthDisabled"
              placeholder="选择月">
            </el-date-picker>
            <el-date-picker
              v-show='chooseTime == "4"'
              style="width: 288px;position: relative;"
              v-model="value4"
              type="year"
              ref="year"
              @change="naturalYears"
              :clearable="false"
              :picker-options="setMonthDisableds"
              placeholder="选择年">
            </el-date-picker>
          </div>
        </div>
        <div class="fourth_one">
          <the-threes :title="allSecond.experiment" :time="allSecond.num" class="experiment">
            <div slot = "falling" class="compare">
              <span>
                较上一{{ status == '1' ? '日' : status == '2' ? '周' : status == '3' ? '月' : status == '4' ? '年' : '-' }}
              </span>
              <i class="el-icon-caret-bottom" v-if="control.newUser"></i><i class="el-icon-caret-top" v-else></i>{{ controlNum.newUser || 0 }}%
            </div>
          </the-threes>
          <the-threes :title="allSecond.average" :time="allSecond.sum" class="average">
            <div slot = "falling" class="compare">
              <span>
                较上一{{ status == '1' ? '日' : status == '2' ? '周' : status == '3' ? '月' : status == '4' ? '年' : '-' }}
              </span>
              <i class="el-icon-caret-bottom" v-if="control.userNumber"></i><i class="el-icon-caret-top" v-else></i>{{ controlNum.userNumber || 0 }}%
            </div>
          </the-threes>
          <the-threes :title="allSecond.teaching" :time="allSecond.kum" class="teaching">
            <div slot = "falling" class="compare">
              <span>
                较上一{{ status == '1' ? '日' : status == '2' ? '周' : status == '3' ? '月' : status == '4' ? '年' : '-' }}
              </span>
              <i class="el-icon-caret-bottom" v-if="control.totalNumber"></i><i class="el-icon-caret-top" v-else></i>{{ controlNum.totalNumber || 0 }}%
            </div>
          </the-threes>
          <the-threes :title="allSecond.grantChang" :time="allSecond.gumC" class="grantChang">
            <div slot = "falling" class="compare">
              <span>
                较上一{{ status == '1' ? '日' : status == '2' ? '周' : status == '3' ? '月' : status == '4' ? '年' : '-' }}
              </span>
              <i class="el-icon-caret-bottom" v-if="control.timeLong"></i><i class="el-icon-caret-top" v-else></i>{{ controlNum.timeLong || 0 }}%
            </div>
          </the-threes>
          <the-threes :title="allSecond.grant" :time="allSecond.gum" class="grant">
            <div slot = "falling" class="compare">
              <span>
                较上一{{ status == '1' ? '日' : status == '2' ? '周' : status == '3' ? '月' : status == '4' ? '年' : '-' }}
              </span>
              <i class="el-icon-caret-bottom" v-if="control.numberOf"></i><i class="el-icon-caret-top" v-else></i>{{ controlNum.numberOf || 0 }}%
            </div>
          </the-threes>
          <the-threes :title="allSecond.consumables" :time="allSecond.cum" class="consumables">
            <div slot = "falling" class="compare">
              <span>
                较上一{{ status == '1' ? '日' : status == '2' ? '周' : status == '3' ? '月' : status == '4' ? '年' : '-' }}
              </span>
              <i class="el-icon-caret-bottom" v-if="control.average"></i><i class="el-icon-caret-top" v-else></i>{{ controlNum.average || 0 }}%
            </div>
          </the-threes>
        </div>
      </div>
      <!-- <div class="fourth_one">
        <the-second :title="allSeconds.experiment" :time="allSeconds.nums" class="experiment">
          <div slot = "falling" class="compare">
            <span>较上一周</span><i class="el-icon-caret-top"></i>18.9%
          </div>
        </the-second>
        <the-second :title="allSeconds.average" :time="allSeconds.sums" class="average">
          <div slot = "falling" class="compare">
            <span>较上一周</span><i class="el-icon-caret-top"></i>18.9%
          </div>
        </the-second>
        <the-second :title="allSeconds.teaching" :time="allSeconds.kums" class="teaching">
          <div slot = "falling" class="compare">
            <span>较上一周</span><i class="el-icon-caret-top"></i>18.9%
          </div>
        </the-second>
        <the-second :title="allSeconds.grantChang" :time="allSeconds.gumC" class="grantChang">
          <div slot = "falling" class="compare">
            <span>较上一周</span><i class="el-icon-caret-top"></i>18.9%
          </div>
        </the-second>
        <the-second :title="allSeconds.grant" :time="allSeconds.gums" class="grant">
          <div slot = "falling" class="compare">
            <span>较上一周</span><i class="el-icon-caret-top"></i>18.9%
          </div>
        </the-second>
        <the-second :title="allSeconds.consumables" :time="allSeconds.cums" class="consumables">
          <div slot = "falling" class="compare">
            <span>较上一周</span><i class="el-icon-caret-top"></i>18.9%
          </div>
        </the-second>
      </div> -->
      <div class="summary">
        <div class="aroundOf compare_student">学习数据概况</div>
        <year-choose :dateX="dateXTim" :dataSeries="dataSeries" style="height: 320px;margin: 0 auto;"></year-choose>
        <!-- <line-chart :opinionData="info" :x="barX" style="height: 320px;margin: 0 auto;" v-else></line-chart> -->
      </div>

      <div class="teaching_t">
        <div>
          <div class="aroundOf">课件学习次数TOP</div>
          <columner :opinionData="infoS" :x="boxX" style="height: 400px;"></columner>
        </div>
        <div>
          <div class="aroundOf">课件学习时长TOP</div>
          <columnar :opinionData="infoY" :x="boxXe" style="height: 400px;"></columnar>
        </div>
      </div>

      <div class="indicators">
        <div class="aroundOf">各学科课程指标</div>
        <ul class="option_ul">
          <li :class="ind == index ? 'act' : ''" v-for="(item,index) in ulList" :key="index" @click="ulClick(index)">{{ item }}</li>
        </ul>
        <!-- <zcolumnar :cross="discipline" :opinionData="disciplineY" style="height: 400px;margin: 0 auto;"></zcolumnar> -->
        <zcolumnar v-if="ind == 0" :cross="discipline" :opinionData="disciplineY" style="height: 500px;margin: 0 auto;"></zcolumnar>
        <zcolumnaa v-else-if="ind == 1" :cross="disciplineA" :opinionData="disciplineAe" style="height: 500px;margin: 0 auto;"></zcolumnaa>
        <zcolumnas v-else-if="ind == 2" :cross="disciplineS" :opinionData="disciplineSes" style="height: 500px;margin: 0 auto;"></zcolumnas>
        <zcolumnae v-else-if="ind == 3" :cross="disciplineE" :opinionData="disciplineEe" style="height: 500px;margin: 0 auto;"></zcolumnae>
        <!-- <zcolumnaq v-else :cross="disciplineQ" :opinionData="disciplineQe" style="height: 500px;margin: 0 auto;"></zcolumnaq> -->
      </div>
      <!-- <div class="search_s">
        <search @searchOn="searchOne" @clearChange="clearChangeSeaOn" @changeEnter="changeEnterOneSea"></search>
        <discipline :discipline="disciplineSe" @nChange="reportSubject" @clearNChange="clearNChange" style="margin-left: 15px;"></discipline>
        <grade :grade="disciplineJe" @jChange="jChange" style="margin-left: 15px;"></grade>
      </div> 
      <kong-from :tableDataForm="tableDataForm"></kong-from>
      <el-pagination
        background
        style="margin-top: 35px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination> -->
    </div>
  </div>
</template>

<script>
import theSecond from '../../components/thieUser/theSecond.vue';
import theThrees from '../../components/thieUser/theThrees.vue';
import lineChart from '../../components/echarts/lineChart.vue';
import columnar from '../../components/echarts/columnar.vue';
import columner from '../../components/echarts/columner.vue';
import zcolumnar from '../../components/echarts/zcolumnar.vue';
import zcolumnaa from '../../components/echarts/zcolumnaa.vue';
import zcolumnas from '../../components/echarts/zcolumnas.vue';
import zcolumnae from '../../components/echarts/zcolumnae.vue';
import zcolumnaq from '../../components/echarts/zcolumnaq.vue';
import chooseTime from '../../components/echarts/chooseTime.vue';
import yearChoose from '../../components/echarts/yearChoose.vue';

import search from '../../components/search/search.vue';
import discipline from '../../components/selector/discipline.vue';
import grade from '../../components/selector/grade.vue';
import kongFrom from '../../components/institutions/kongFrom.vue';
import { mTimeSeconds, minutesStudents, timestampToTimeShi, timestampMath, timestampYears, timestampYmd, timestampToTimesEs } from '../../utils/util';
export default {
  components: { theSecond, theThrees, lineChart, columnar, zcolumnar, search, discipline, grade, kongFrom, zcolumnaa, zcolumnas, zcolumnae, zcolumnaq, chooseTime, yearChoose, columner },
  data() {
    return {
      ind: 0,
			status: '' ,  // 判断选择的日期是哪个所对应显示
      valTime: '',
			chooseTimeDay: '',  // 选择时间筛选所对应的时间
			chooseTimeDays: '',
			control: {  // 判断将上一次
				newUser: false,
				userNumber: false,
				totalNumber: false,
				timeLong: false,
				numberOf: false,
				average: false
			},
			controlNum: {
				newUser: '',
				userNumber: '',
				totalNumber: '',
				timeLong: '',
				numberOf: '',
				average: ''
			},
      chooseTime: '1', // 下拉框选中哪个显示所对应的筛选日期
      optionsTime: [{ value: '自然日', label: '自然日' },{ value: '自然周', label: '自然周' },{ value: '自然月', label: '自然月' },{ value: '自然年', label: '自然年' }],
      value1: '', // 自然周
      value2: '', // 自然日
      value3: [], // 自然月
      setMonthDisabled: {  // 禁用element自带Picker Options 方法  限制大于当前月份不可选中禁用置灰
        disabledDate(time) {
          // 获取当前的月份信息
          const date = new Date(); // 获取当前的时间基本信息，值是这样的： Tue Jul 20 2021 14:59:43 GMT+0800 (中国标准时间)
          const year = date.getFullYear(); // 获取当前年份，值是这样的： 2021
          let month = date.getMonth() + 1; // 获取当前月份，值是这样的： 6   getMonth()方法返回值是0-11，也就是1月份到12月份，所以要加上1，才是当前月份
          if (month >= 1 && month <= 9) { // 月份大于1小于9前面补零
            month = "0" + month;  // 如果是1月到9月就要在前面补上一个0   比如：02、07    月份这样表示
          }
          const nowDate = year.toString() + month.toString(); // 转换成字符串拼接，最终得到年和月，比如此时的时间是2021年7月20号，所以nowDate的值是：202107
          // 获取时间选择器的月份信息
          const timeyear = time.getFullYear(); // 获取时间选择器的年份（有很多）
          let timemonth = time.getMonth() + 1; // 与上面同理
          if (timemonth >= 1 && timemonth <= 9) {
            timemonth = "0" + timemonth;
          }
          const elTimeData = timeyear.toString() + timemonth.toString() + 1;
          // 返回，时间选择器的日期月份大于当前日期的月份，又因为disabledDate函数是控制月份禁用不可选
          // 所以，最终就是：时间选择器的月份大于当前的月份，就都禁用掉，所以就实现了最终效果：
          // 大于等于当前月份都不可选 
          return elTimeData > nowDate; // 这里虽然是字符串，但是弱类型语言js会做一个转换，是可以比较大小的如： '202107' > '202008'
        },
      },
      value4: '', // 自然年
      setMonthDisableds: {  // 自然年限制大于当前年不可选
        disabledDate(time) {
          // 获取当前的月份信息
          const date = new Date(); // 获取当前的时间基本信息，值是这样的： Tue Jul 20 2021 14:59:43 GMT+0800 (中国标准时间)
          const year = date.getFullYear(); // 获取当前年份，值是这样的： 2021
          let month = date.getMonth() + 1; // 获取当前月份，值是这样的： 6   getMonth()方法返回值是0-11，也就是1月份到12月份，所以要加上1，才是当前月份
          if (month >= 1 && month <= 9) {
            month = "0" + month;  // 如果是1月到9月就要在前面补上一个0   比如：02、07    月份这样表示
          }
          const nowDate = year.toString() + month.toString(); // 转换成字符串拼接，最终得到年和月，比如此时的时间是2021年7月20号，所以nowDate的值是：202107
          // 获取时间选择器的月份信息
          const timeyear = time.getFullYear(); // 获取时间选择器的年份（有很多）
          let timemonth = time.getMonth() + 1; // 与上面同理
          if (timemonth >= 1 && timemonth <= 9) {
            timemonth = "0" + timemonth;
          }
          const elTimeData = timeyear.toString() + timemonth.toString();
          // 返回，时间选择器的日期月份大于当前日期的月份，又因为disabledDate函数是控制月份禁用不可选
          // 所以，最终就是：时间选择器的月份大于当前的月份，就都禁用掉，所以就实现了最终效果：
          // 大于等于当前月份都不可选 
          return elTimeData > nowDate; // 这里虽然是字符串，但是弱类型语言js会做一个转换，是可以比较大小的如： '202107' > '202008'
        },
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
              
      allSecond: {
        experiment: '新增用户',
        num: '0',
        average: '用户总数',
        sum: '0',
        teaching: '设备总量',
        kum: '0',
        grantChang: '学习时长',
        gumC: '0',
        grant: '学习次数',
        gum: '0',
        consumables: '平均完课率',
        cum: '0',
      },
      allSeconds:{
        experiment: '新增用户',
        nums: 0,
        average: '用户总数',
        sums: 0,
        teaching: '设备总量',
        kums: 0,
        grantChang: '学习时长',
        gumC: 48,
        grant: '学习次数',
        gums: 0,
        consumables: '平均完课率',
        cums: 0
      },
      // barX: [],
      // info: [
      //   {
      //     name: '用户学习次数',
      //     type: 'line',
      //     // stack: 'Total',
      //     data: []
      //   }
      // ],
      dateXTim: [],  // 这下面两个是自然年的数据
      dataSeries: [],

      infoS: [],
      boxX:  [{
        data: [],
        name: '课件学习次数(次)',
        type: 'bar',
        label: {
          show: true,
          position: 'right',
          color: '#000',
          fontWeight: 'bold',
          // formatter: '{c}' + '次', // 自定义柱顶显示内容
          formatter: '{c}',
        },
        itemStyle: {
          //这里是重点
          color: function(params) {
            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            var colorList = ['#ed5a65','#eea2a4', '#ed3321', 'skyblue', '#c08eaf'];
            return colorList[params.dataIndex]
          }
        }
      }],
      infoY: [],
      boxXe:[{
        data: [],
        type: 'bar',
        name: '课件学习时长(分)',
        label: {
          show: true,
          position: 'right',
          color: '#000',
          fontWeight: 'bold',
          // formatter: '{c}' + '次', // 自定义柱顶显示内容
          formatter: '{c}',
        },
        itemStyle: {
          color: function(params) {
            // 给出颜色组
            var colorList = ['skyblue', '#ed3333', '#83cbac', '#fed71a','#55bb8a'];
            //循环调用
            return colorList[params.dataIndex%colorList.length];
          },
        }
      }],
      ulList:['学习人数', '学习时长', '人均学习时长', '课程学习次数'],
      discipline: [],
      disciplineY: [{
        data: [],
        barWidth: 80,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          color: '#000',
          fontWeight: 'bold'
        },
        itemStyle: {
          //这里是重点
          color: function(params) {
            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            var colorList = ['#fbda41','#f86b1d', '#ed3321', 'skyblue', '#c08eaf'];
            return colorList[params.dataIndex]
          }
        }
      }],
      disciplineA: [],
      disciplineAe: [{
        data: [],
        barWidth: 80,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          color: '#000',
          fontWeight: 'bold'
        },
        itemStyle: {
          //这里是重点
          color: function(params) {
            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            var colorList = ['#1125dd','#f86b1d', '#fba414', 'skyblue', '#c08eaf'];
            return colorList[params.dataIndex]
          }
        }
      }],
      disciplineS: [],
      disciplineSes: [{
        data: [],
        barWidth: 80,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          color: '#000',
          fontWeight: 'bold'
        },
        itemStyle: {
          //这里是重点
          color: function(params) {
            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            var colorList = ['#e733ed','#55ff00', '#ff00ff', 'skyblue', '#0811c0'];
            return colorList[params.dataIndex]
          }
        }
      }],
      disciplineE: [],
      disciplineEe: [{
        data: [],
        barWidth: 80,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          color: '#000',
          fontWeight: 'bold'
        },
        itemStyle: {
          //这里是重点
          color: function(params) {
            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            var colorList = ['#a1ffd8','#aaff00', '#ffaaff', 'skyblue', '#ed3321'];
            return colorList[params.dataIndex]
          }
        }
      }],
      disciplineQ: [],
      disciplineQe: [{
        data: [],
        barWidth: 80,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          color: '#000',
          fontWeight: 'bold'
        },
        itemStyle: {
          //这里是重点
          color: function(params) {
            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            var colorList = ['#c833bc','#bdf5f8', '#fbec0d', '#ffa30e', '#ed3321'];
            return colorList[params.dataIndex]
          }
        }
      }],

      disciplineSe: [ {  value: '物理', label: '物理' }, { value: '化学', label: '化学' }, { value: '生物', label: '生物' } ],
      disciplineJe: [ { value: '初一上', label: '初一上' }, { value: '初一下', label: '初一下' }, { value: '初二上', label: '初二上' }, { value: '初二下', label: '初二下'}, { value: '初三上', label: '初三上' }, { value: '初三下', label: '初三下' } ],
      tableDataForm: [],
      currentPage3: 1,
      pageSize: 0,
      total: 0,
      souSuo: '',  // 数据报表搜索
      nianJi: '',  // 数据报表中的年级
      xueKe: '',   // 数据报表中的学科
    }
  },
  watch: {
    valTime: {
      handler: function(newVal, oldVal) {
        this.value2 = this.value1 = this.value3 = this.value4 = '';  // 监听时间选择切换后，后面的内容为空
      }
    }
  },
  mounted(){
    this.naturalDayChoose();// _this.pageDataAll();  // 原来的折线图和柱状图
  },
  methods:{
    // 最上方选择自然日/周/月年
    changeTime(val,value) { 
			this.valTime = value;
		  if(val == '自然日') { this.chooseTime = '1';this.$refs['tiemPick'].pickerVisible = true; }
			else if(val == '自然周') { this.chooseTime = '2';this.$refs['daterange'].pickerVisible = true; }
			else if(val == '自然月') { this.chooseTime = '3';this.$refs['month'].pickerVisible = true; }
			else if(val == '自然年') { this.chooseTime = '4';this.$refs['year'].pickerVisible = true; }
		},
    // 进入页面默认选中当前日期
    naturalDayChoose() { this.ind = 0;var date = new Date(); this.value2 = timestampToTimesEs(date); this.theCar(this.chooseTime,this.value2,'','') }, // 默认进去请求数据 
    // 自然日选择
    naturalDay(val) { this.ind = 0;this.chooseTimeDay = timestampYmd(val); this.theCar(this.chooseTime,this.chooseTimeDay,'','')},// 核心数据请求 
    // 自然周
    naturalWeeks(val) { this.ind = 0;this.chooseTimeDays = val; this.theCar(this.chooseTime,'',timestampYmd(val[0]),timestampYmd(val[1]))}, // 默认进去请求数据	// 核心数据请求 
    // 自然月
    controlMonth(val) { this.ind = 0;this.chooseTimeDay = timestampMath(val); this.theCar(this.chooseTime,timestampMath(val),'','')}, // 默认进去请求数据	// 核心数据请求 
    // 自然年
    naturalYears(val){ this.ind = 0;this.chooseTimeDay = timestampYears(val); this.theCar(this.chooseTime,this.chooseTimeDay,'','')},  // 核心数据请求 
		// 统计中的数据公共方法
		theCar(status,time,minTime,maxTime) {
			this.$http.institutions.CoreDate({status,time,minTime,maxTime}).then( (res) => {	// 这个是核心数据
				this.allSecond.num = res.data.addCount == null ? '0' : res.data.addCount + '';  // 新增用户	
				this.allSecond.sum = res.data.userCount == null ? '0' : res.data.userCount + ''; // 用户总数
				this.allSecond.kum = res.data.eqCount == null ? '0' : res.data.eqCount + ''; // 设备总量
				this.allSecond.gumC = res.data.zong == null ? '0' : timestampToTimeShi(res.data.zong) == '00秒' ? '0' : timestampToTimeShi(res.data.zong); // 学习次数
				this.allSecond.gum = res.data.xcount == null ? '0' : res.data.xcount + ''; // 学习次数
				this.allSecond.cum = res.data.avgCount == null ? '0' : res.data.avgCount + ''; // 平均完课率
				if(res.data.addCountLast.toString()[0] == '-') {  // 判断下方的那个	较上一。。// 这个是新增用户
				  this.control.newUser = true;
				  this.controlNum.newUser = res.data.addCountLast == null ? 0 : res.data.addCountLast.toFixed(2).slice(1);
          // if(this.controlNum.newUser.split('.')[1] == '00') { this.controlNum.newUser = this.controlNum.newUser.split('.')[0] }
				} else {
				  this.control.newUser = false;
					this.controlNum.newUser = res.data.addCountLast == null ? 0 : res.data.addCountLast.toFixed(2);
				}
				if(res.data.userCountLast.toString()[0] == '-'){// 这个是用户总数
				  this.control.userNumber = true;
				  this.controlNum.userNumber = res.data.userCountLast == null ? 0 : res.data.userCountLast.toFixed(2).slice(1);
          // if(this.controlNum.userNumber.split('.')[1] == '00') { this.controlNum.userNumber = this.controlNum.userNumber.split('.')[0] }
				}  else {
				  this.control.userNumber = false;
					this.controlNum.userNumber = res.data.userCountLast == null ? 0 : res.data.userCountLast.toFixed(2);
				}
				if(res.data.eqCountLast.toString()[0] == '-') {// 这个是设备数量
				  this.control.totalNumber = true;
				  this.controlNum.totalNumber = res.data.eqCountLast == null ? 0 : res.data.eqCountLast.toFixed(2).slice(1);
          // if(this.controlNum.totalNumber.split('.')[1] == '00') { this.controlNum.totalNumber = this.controlNum.totalNumber.split('.')[0] }
				} else {
				  this.control.totalNumber = false;
					this.controlNum.totalNumber = res.data.eqCountLast == null ? 0 : res.data.eqCountLast.toFixed(2);
				}
				if(res.data.zongLast.toString()[0] == '-') {// 这个是学习次数
				  this.control.timeLong = true;
				  this.controlNum.timeLong = res.data.zongLast == null ? 0 : res.data.zongLast.toFixed(2).slice(1);
          // if(this.controlNum.timeLong.split('.')[1] == '00') { this.controlNum.timeLong = this.controlNum.timeLong.split('.')[0] }
				} else {
				  this.control.timeLong = false;
					this.controlNum.timeLong = res.data.zongLast == null ? 0 : res.data.zongLast.toFixed(2);
				}
				if(res.data.xcountLast.toString()[0] == '-') {// 这个是学习时长
				  this.control.numberOf = true;
				  this.controlNum.numberOf = res.data.xcountLast == null ? 0 : res.data.xcountLast.toFixed(2).slice(1);
          // if(this.controlNum.numberOf.split('.')[1] == '00') { this.controlNum.numberOf = this.controlNum.numberOf.split('.')[0] }
				} else {
				  this.control.numberOf = false;
					this.controlNum.numberOf = res.data.xcountLast == null ? 0 : res.data.xcountLast.toFixed(2);
				}
				if(res.data.avgCountLast.toString()[0] == '-') {// 这个是平均完成率
				  this.control.average = true;
				  this.controlNum.average = res.data.avgCountLast == null ? 0 : res.data.avgCountLast.toFixed(2).slice(1)
          // if(this.controlNum.average.split('.')[1] == '00') { this.controlNum.average = this.controlNum.average.split('.')[0] }
				} else {
				  this.control.average = false;
					this.controlNum.average = res.data.avgCountLast == null ? 0 : res.data.avgCountLast.toFixed(2);
				}
				this.status = res.data.status;   // 请求成功后更换下方的那个比较。。。
			})
			this.dateXTim = [];// 这个是数据概况
			this.dataSeries = [];
			this.$http.institutions.generalization({status,time,minTime,maxTime}).then( (res) => {
				res.data.filter( result => {
					this.dateXTim.push(JSON.parse(JSON.stringify(result.shoDate)));
				  this.dataSeries.push(JSON.parse(JSON.stringify(result.count)));
				})
			})
			this.infoY = [];// 这个是课件学习时长TOP
			this.boxXe[0].data = [];
			this.$http.institutions.teachingTime({status,time,minTime,maxTime}).then( (res) => {
				if(res.data != []){
					res.data.filter( ci => {
					  this.infoY.push(ci.name);
						if(minutesStudents(ci.count) == '0.0') { this.boxXe[0].data.push(0) } 
            else { this.boxXe[0].data.push(minutesStudents(ci.count)) }
					})
				}
			})
			this.infoS = [];// 这个是课件学习次数TOP
			this.boxX[0].data = [];
			this.$http.institutions.teachingCourwarelou({status,time,minTime,maxTime}).then( res => {
				if(res.data != []){
					res.data.filter( ci => {
					  this.infoS.push(ci.name);
            this.boxX[0].data.push(ci.count)
					})
				}
			})
			this.discipline = [];
			this.disciplineY[0].data = [];
			if(this.ind == 0) {
        if(this.chooseTime == '1' || this.chooseTime == '3' || this.chooseTime == '4') { 
					this.numberPeo(this.chooseTime, this.chooseTimeDay || timestampToTimesEs(this.value2),'','');
				} else {
					this.numberPeo(this.chooseTime,'',timestampYmd(this.chooseTimeDays[0]),timestampYmd(this.chooseTimeDays[1]));
				}
			}
		},
    // 数据报表各学科课程指标切换
    ulClick(index){
      var _this = this;
      _this.ind = index;
      if(index == 0) {
        _this.discipline = [];
        _this.disciplineY[0].data = [];
        if(_this.chooseTime == '1' || _this.chooseTime == '3' || _this.chooseTime == '4') {
          console.log(_this.chooseTimeDay , timestampToTimesEs(_this.value2))
					_this.numberPeo(_this.chooseTime,_this.chooseTimeDay || timestampToTimesEs(_this.value2),'','');
				} else {
					_this.numberPeo(_this.chooseTime,'',timestampYmd(_this.chooseTimeDays[0]),timestampYmd(_this.chooseTimeDays[1]));
				}
      } else if(index == 1) {
        _this.disciplineA = [];
        _this.disciplineAe[0].data = [];
        if(_this.chooseTime == '1' || _this.chooseTime == '3' || _this.chooseTime == '4') {
        	_this.numberPeos(_this.chooseTime,_this.chooseTimeDay || timestampToTimesEs(_this.value2),'','');
        } else {
        	_this.numberPeos(_this.chooseTime,'',timestampYmd(_this.chooseTimeDays[0]),timestampYmd(_this.chooseTimeDays[1]));
        }
      } else if(index == 2) {
        _this.disciplineS = [];
        _this.disciplineSes[0].data = [];
        if(_this.chooseTime == '1' || _this.chooseTime == '3' || _this.chooseTime == '4') {
        	_this.numberPeoC(_this.chooseTime,_this.chooseTimeDay || timestampToTimesEs(_this.value2),'','');
        } else {
        	_this.numberPeoC(_this.chooseTime,'',timestampYmd(_this.chooseTimeDays[0]),timestampYmd(_this.chooseTimeDays[1]));
        }
      } else if(index == 3) {
        _this.disciplineE = [];
        _this.disciplineEe[0].data = [];
       if(_this.chooseTime == '1' || _this.chooseTime == '3' || _this.chooseTime == '4') {
       	_this.numberPeoS(_this.chooseTime,_this.chooseTimeDay || timestampToTimesEs(_this.value2),'','');
       } else {
       	_this.numberPeoS(_this.chooseTime,'',timestampYmd(_this.chooseTimeDays[0]),timestampYmd(_this.chooseTimeDays[1]));
       }
      } else {  
        _this.disciplineQ = [];
        _this.disciplineQe[0].data = [];
        if(_this.chooseTime == '1' || _this.chooseTime == '3' || _this.chooseTime == '4') {
        	_this.numberPeoN(_this.chooseTime,_this.chooseTimeDay || timestampToTimesEs(_this.value2),'','');
        } else {
        	_this.numberPeoN(_this.chooseTime,'',timestampYmd(_this.chooseTimeDays[0]),timestampYmd(_this.chooseTimeDays[1]));
        }
      }
    },
    numberPeo(status,time,minTime,maxTime) {
			var _this = this;
			_this.$http.institutions.renShuZhiBiao({status,time,minTime,maxTime}).then(res => {
			  res.data.filter( item => {
			    if(item.subject != ''){
			      _this.discipline.push(item.fname);
			      _this.disciplineY[0].data.push(item.count);
			    }
			  })
			})
		},
		numberPeos(status,time,minTime,maxTime) {
			var _this = this;
			_this.$http.institutions.CourwareTongShi({status,time,minTime,maxTime}).then(res => {
			  res.data.filter( item => {
			    if(item.subject != ''){
			      _this.disciplineA.push(item.fname);
			      if(item.count == null || item.count == 0) {
			        item.count = 0;
			        _this.disciplineAe[0].data.push(item.count);
			      } else {
			        _this.disciplineAe[0].data.push(minutesStudents(item.count));
			      }
			    } 
			  })
			})
		},
		numberPeoC(status,time,minTime,maxTime) {
			var _this = this;
			_this.$http.institutions.CourwareTongPin({status,time,minTime,maxTime}).then(res => {
			  res.data.filter( item => {
			    if(item.subject != ''){
			      _this.disciplineS.push(item.fname);
			      if(item.count == null || item.count == 0) { 
			        item.count = 0;
			        _this.disciplineSes[0].data.push(item.count);
			      } else {
			        _this.disciplineSes[0].data.push(minutesStudents(item.count));
			      }
			    }
			  })
			})
		},
		numberPeoS(status,time,minTime,maxTime) {
			var _this = this;
			_this.$http.institutions.CourwareTongCi({status,time,minTime,maxTime}).then(res => {
			  res.data.filter( item => {
			    if(item.subject != '') {
			      _this.disciplineE.push(item.fname);
			      _this.disciplineEe[0].data.push(item.count);
			    }
			  })
			})
		},
    // 暂时没用到下面这个
    numberPeoN(status,time,minTime,maxTime) {
    	var _this = this;
    	_this.$http.institutions.CourwareTongDu().then(res => {
    	  res.data.filter( item => {
    	    if(item.fname != '') {
    	      _this.disciplineQ.push(item.fname);
    	      _this.disciplineQe[0].data.push(item.count);
    	    }
    	  })
    	})
    },
    
		// -------------------------------------------------------------------------------------------------------------------------------------
    // 更改公共的累计学习时长h
    pageDataAll(){	// 获取页面数据  // debugger 打断点// 这个是最下方的表格
      this.$http.institutions.theLoer().then( res => {   
        this.tableDataForm = res.data;
        this.pageSize = res.size;
        this.total = res.total;
        this.gongGongStudent();
      })
    },
    gongGongStudent(time){ this.tableDataForm.filter( item => { item.shi = mTimeSeconds(item.shi); item.pinshi = mTimeSeconds(item.pinshi) }) },
    qingXue(){
      this.$http.institutions.theLoer().then( res => {
        this.tableDataForm = res.data;
        this.pageSize = res.size;
        this.total = res.total;
        this.gongGongStudent();
      })
    },
    // 搜索
    searchOne(val){  this.currentPage3 = 1;this.souSuo = val;this.sanFunctionSou(this.currentPage3,val,this.xueKe,this.nianJi.toString());  },
    // 搜索的清除
    clearChangeSeaOn(){  this.currentPage3 = 1;this.sanFunctionSou(this.currentPage3,'',this.xueKe,this.nianJi.toString()); },
    // 搜索的回车案件
    changeEnterOneSea(val){ this.currentPage3 = 1;this.souSuo = val;this.sanFunctionSou(this.currentPage3,val,this.xueKe,this.nianJi.toString()) },
    // 报表学科
    reportSubject(val){
      this.xueKe = val;
      if(val === '物理'){ this.currentPage3 = 1; this.sanFunctionSou(this.currentPage3,this.souSuo,val,this.nianJi.toString()) } 
      else if(val === '化学'){ this.currentPage3 = 1; this.sanFunctionSou(this.currentPage3,this.souSuo,val,this.nianJi.toString()) } 
      else if(val == '生物') { this.currentPage3 = 1; this.sanFunctionSou(this.currentPage3,this.souSuo,val,this.nianJi.toString())} 
      else { this.currentPage3 = 1; this.qingXue(); }
    },
    // 全部学科清除
    clearNChange(){ this.currentPage3 = 1; this.sanFunctionSou(this.currentPage3,this.souSuo,this.xueKe,this.nianJi.toString()); },
    // 报表年级
    jChange(val){ this.nianJi = val; this.sanFunctionSou(this.currentPage3,this.souSuo,this.xueKe,val.toString()); },
    // 分页 
    handleSizeChange(val) {
      this.currentPage3 = val;
      // this.sanFunctionSou(val);
    },
    handleCurrentChange(val) { this.currentPage3 = val; this.sanFunctionSou(val,this.souSuo,this.xueKe,this.nianJi.toString()); },
    
    // 三个搜索公用方法
    sanFunctionSou(valPage,val,subject,clas) {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout( async () => {
        await this.$http.institutions.theLoer({page: valPage,name: val,subject: subject,clas: clas}).then( res => {
          this.tableDataForm = res.data;
          this.total = res.total;
          this.currentPage3 = res.currentPage;
          this.gongGongStudent();
        })
      }, 100);
    },
    // --------------------------------------------------------------------------------------------------------------------------------------
  }
}
</script>

<style scoped>
@import '../../assets/css/statistical/statistical.scss';
</style>